<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>



<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>青麦门店系统|导入商品</title>
<meta
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
	name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />

<!-- ================== BEGIN BASE CSS STYLE ================== -->
<%@ include file="../include/inc_head.jsp"%>
<!-- ================== END BASE CSS STYLE ================== -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="/assets/plugins/pace/pace.min.js"></script>
<link href="/assets/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
<!-- ================== END BASE JS ================== -->

</head>
<body>
	<!-- begin #page-loader -->
	<div id="page-loader" class="fade in">
		<span class="spinner"></span>
	</div>
	<!-- end #page-loader -->

	<!-- begin #page-container -->
	<div id="page-container"
		class="fade page-sidebar-fixed page-header-fixed">
		<!-- begin #header -->
		<%@ include file="../include/inc_header.jsp"%>
		<!-- end #header -->

		<!-- begin #sidebar -->
		<%@ include file="../include/inc_left.jsp"%>
		<!-- end #sidebar -->
		
		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">首页</a></li>
				<li class="active">商品导入</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">商品导入</h1>
			<!-- end page-header -->

	<div class="panel panel-inverse">
				
				<div class="panel-heading">

					<h4 class="panel-title" style="color:#ffffff;">查询条件</h4>
				</div>
				
				<div class="panel-body">
					<form id="search-form" class="form-inline" method="POST">
						<div class="form-group m-r-10" >
					        
					        <select class="form-control" id="class1">
					               <option>---一级分类---</option>    
					        </select>
					        <select class="form-control" id="class2">
					               <option>---二级分类---</option>    
					        </select>
					        <select class="form-control" id="class3">
					               <option>---三级分类---</option>    
					        </select>
					        
					        <input type="hidden" class="form-control" name="class3Id" placeholder="三级分类id" />
					    </div>
				        
				        <input type="hidden" class="form-control" name="class3Id" placeholder="三级分类id" />
					
						<div class="form-group m-r-10">
							<input type="text" class="form-control" name="skuNo" placeholder="sku编号" />
						</div>
						<!-- <div class="form-group m-r-10">
							 <select class="form-control" name="status">
							 		<option value="-1">sku状态</option>
									<option value="1">生效</option>
									<option value="2">失效</option>
                                      </select>
						</div> -->
						<div class="form-group m-r-10">
							<input type="text" class="form-control" readonly="readonly" name="startDate" id="startDate" placeholder="日期开始" />
                                    - <input type="text" class="form-control" readonly="readonly" name="endDate" id="endDate" placeholder="日期结束" />
						</div>
						<button type="button" class="btn btn-sm btn-primary m-r-5" onclick="doSearch();">查询</button>
						<div id="myModal" class="modal hide fade">
						   <div class="modal-body">
						    <iframe id="myIframe" width="100%" height="100%"></iframe>
						   </div>
						</div>
					</form>
					
				</div>
			</div>
			
				<div class="panel-body">
				 <a href="javascript:void(0);" type="button" id="exptSkuByBatch" class="btn btn-sm btn-warning m-b-5" >批量导入</a>
					
					<table id="data-table" class="table table-striped table-bordered" >
					</table>
				</div>

		</div>
		<!-- end #content -->

		<%@ include file="../include/inc_footer.jsp"%>
		<!-- begin scroll to top btn -->
		<a href="javascript:;"
			class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
			data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- end scroll to top btn -->
	</div>
	<!-- end page container -->

	<!-- ================== BEGIN BASE JS ================== -->
	<%@ include file="../include/inc_foot.jsp"%>

	<!-- ================== END BASE JS ================== -->

	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script src="/assets/plugins/DataTables/media/js/jquery.dataTables.js"></script>
	<script src="/assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js"></script>
	<script src="/assets/js/table-manage-default.demo.min.js"></script>
	<script src="/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="/assets/plugins/bootstrap-datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="/assets/js/apps.min.js"></script>
	
	
	
	<link rel="stylesheet" type="text/css" href="/assets/jQueryEasyui/themes/gray/easyui.css">  
<link rel="stylesheet" type="text/css" href="/assets/jQueryEasyui/themes/icon.css">  
<!-- <link rel="stylesheet" type="text/css" href="/assets/jQueryEasyui/style.css">  
<link rel="stylesheet" type="text/css"
	href="/assets/jQueryEasyui/demo.css">
	<link rel="stylesheet" type="text/css"
	href="/assets/jQueryEasyui/list.css"> -->
<!-- <script type="text/javascript" src="/assets/jQueryEasyui/jquery-1.8.0.min.js"></script>  --> 
<script type="text/javascript" src="/assets/jQueryEasyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="/assets/jQueryEasyui/easyui-lang-zh_CN.js"></script> 

	<script src="/assets/plugins/bootstrap-distpicker/distpicker.data.js"></script>
	<script src="/assets/plugins/bootstrap-distpicker/distpicker.js"></script>
	

	<script>
	$(function() {
		
		/* $("#exptSku").click(function(){
		    $("#myIframe").attr("src","../product/skuList");
		    $('#myModal').modal({show:true});
		    $('#myModal').removeClass("hide");
		}); */
		
		$('#data-table')
				.datagrid(
						{
							title : 'sku管理',
							loadMsg : '数据加载中,请稍后................',
							nowrap : true,
							striped : true,
							url : '/product/unbindSkuList',
							pagination : true,
							rownumbers : true,
							singleSelect : false,
							border : true,
							pageSize : '10',
							columns : [ [
									{
										field : 'check',
										checkbox : true
									},
									{
										field : 'skuCode',
										title : '商品编码',
										width :  200,
										align : 'center'
									},
									{
										field : 'skuName',
										title : '商品名称',
										width :   170,
										align : 'center'
									},
									
									{
										field : 'skuFormat',
										title : '规格',
										width :   170,
										align : 'center'
									},
									{
										field : 'skuDesc',
										title : '商品描述',
										width :   170,
										align : 'center'
									},
									{
										field : 'uT',
										title : '最后修改时间',
										width :  100,
										align : 'center'
									},
									{
										field : 'status',
										title : '状态',
										width :  120,
										align : 'center'
										
									},
									
									{
										field : 'tttt',
										title : '操作',
										width :  200,
										align : 'center',
										formatter : function(value, rec, index) {
											var str ="<a type='buttom' class='exportSku btn btn-sm btn-warning m-r-5' onclick='exportSku("+JSON.stringify(rec)+",this)'>导入</a>"+"";
											return str;
										}
									} ] ]
						});
	 var p = $('#data-table').datagrid('getPager');
		$(p).pagination({
			pageSize : 10,
			pageList : [ 10, 20, 30 ]
		});  

		//获取活动分类
	});
	
	function exportSku(o1,o2){
    	var row = o1;
    	var that = o2;
        //$('#skuId').val(row.id);
        //$('#skuName').val(row.skuName);
        //调用导入sku接口
        $.ajax({
            url:"/product/bindSku",    //请求的url地址
            dataType:"json",   //返回格式为json
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            data:{"id":row.id},    //参数值
            type:"POST",
            success:function(req){
            	if(req.code==0){
            		 //请求成功时处理
                    $(that).removeClass("btn-warning");
                    $(that).addClass("btn-sucess");
                    $(that).text("已绑定");
            	}
            	else{
            		$(that).removeClass("btn-danger");
                    $(that).text("绑定失败");
            	}
            },
            error:function(){
                //请求出错处理
            }
        });
	}
			 var url;
			//新增
			/* function create(){
	            $('#dlg').dialog('open').dialog('setTitle','新增');
	            $('#fm').form('clear');
	            url = 'product/skuAdd?f=add';
	        } */
			//编辑
	        function edit(){
	            var row = $('#mTb').datagrid('getSelected');
	            if (row){
	                $('#dlg').dialog('open').dialog('setTitle','修改');
	                $('#fm').form('load',row);
	                url = 'UserServlet?f=update&id=' + row.id;
	            }
	        }
			//保存
	        function save(){
	            $('#fm').form('submit',{
	                url: url,
	                onSubmit: function(){
	                    return $(this).form('validate');
	                },
	                success: function(result){
	                    var result = eval('('+result+')');
	                    if (result.success){
	                        $.messager.show({
	                            title: '提示',
	                            msg: result.message
	                        });
	                        $('#dlg').dialog('close');        // close the dialog
	                        $('#mTb').datagrid('reload');    // reload the user data
	                    } else {
	                        $.messager.show({
	                            title: '提示',
	                            msg: result.message
	                        });
	                    }
	                }
	            });
	        }
			//删除
	        function remove(){
	            var row = $('#mTb').datagrid('getSelected');
	            if (row){
	                $.messager.confirm('确认','您确定要删除吗？',function(r){
	                    if (r){
	                        $.post('UserServlet?f=delete',{id:row.id},function(result){
	                            if (result.success){
	                                $.messager.show({    // show error message
	                                        title: '提示',
	                                        msg: result.message
	                                    });
	                                $('#mTb').datagrid('reload');    // reload the user data
	                            } else {
	                                $.messager.show({    // show error message
	                                    title: '提示',
	                                    msg: result.message
	                                });
	                            }
	                        },'json');
	                    }
	                });
	            }
	        }
	
		//查询
	function doSearch() {
		var formData = $("#search-form").serializeArray();
		console.log(formData);
		
		$('#data-table').datagrid('reload', {
			class3Id:formData[0].value,
			skuNo : formData[1].value,
			status:formData[2].value,
			startDate : formData[3].value,
			endDate : formData[4].value
		});
	}
	</script>
		<script>
		$(function(){
			$("#class1").click(function(){
				console.log($("#class3").find("option:selected").attr("data-code"));
				$("input[name='class3Id']").val($("#class3").find("option:selected").attr("data-code"));
			});
			$("#class2").click(function(){
				console.log($("#class3").find("option:selected").attr("data-code"));
				$("input[name='class3Id']").val($("#class3").find("option:selected").attr("data-code"));
			});
			
			$("#class3").click(function(){
				console.log($("#class3").find("option:selected").attr("data-code"));
				$("input[name='class3Id']").val($("#class3").find("option:selected").attr("data-code"));
			});
			$("#exptSkuByBatch").click(function(){
				/* var id = "";
				$("input[name='check']:checked").each(function(){ 
					id = id + $(this).val() + ","; 
				});
				alert(id); */
				var id = "";
				var row = $('#data-table').datagrid('getSelections');
				for(var i=0;i<row.length;i++)
				{
					id = id + row[i].id + ","; 
				}
				 $.ajax({
			            url:"/product/bindSku",    //请求的url地址
			            dataType:"json",   //返回格式为json
			            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
			            data:{"id":id},    //参数值
			            type:"POST",
			            success:function(req){
			            	alert("批量导入成功!");
			            	 $('#data-table').datagrid('reload');
			            },
			            error:function(){
			                //请求出错处理
			            }
			        });
			});
		});
		
		$(document).ready(function() {
			$("#startDate").datepicker({
		        format: 'yyyy-mm-dd',
		        language: "zh-CN",
		        keyboardNavigation: false,
		        forceParse: false,
		        calendarWeeks: false,
		        autoclose: true,
		    });
			$("#endDate").datepicker({
		        format: 'yyyy-mm-dd',
		        language: "zh-CN",
		        keyboardNavigation: false,
		        forceParse: false,
		        calendarWeeks: false,
		        autoclose: true,
		    });
			$("#startDate").on("changeDate",
		    function(e) {
		        $("#endDate").data("datepicker").setStartDate(e.date)
		    });
		    $("#endDate").on("changeDate",
		    function(e) {
		        $("#startDate").data("datepicker").setEndDate(e.date)
		    });

		}); 
		App.init();
		
		//分类的三级联动
		$(function () {
				
			  'use strict';
				
			  var $distpicker = $('#distpicker');
				
			  $distpicker.distpicker('reset', true);
			  
			  $distpicker.distpicker({
			    province: '福建省',
			    city: '厦门市',
			    district: '思明区'
			  });

			  $('#reset').click(function () {
			    $distpicker.distpicker('reset');
			  });

			  $('#reset-deep').click(function () {
			    $distpicker.distpicker('reset', true);
			  });

			  $('#destroy').click(function () {
			    $distpicker.distpicker('destroy');
			  });

			  $('#distpicker1').distpicker();

			  $('#distpicker2').distpicker({
			    province: '---- 一级分类 ----',
			    city: '---- 二级分类 ----',
			    district: '---- 三级分类 ----'
			  });

			  $('#distpicker3').distpicker({
			    province: '浙江省',
			    city: '杭州市',
			    district: '西湖区'
			  });

			  $('#distpicker4').distpicker({
			    placeholder: false
			  });

			  $('#distpicker5').distpicker({
			    autoSelect: false
			  });

			});
	</script>
	<!-- 分类三级联动 -->
	<script type="text/javascript">
        $(function () {
            function Init(node) {
                return node.html("<option>---请选择---</option>");
            }
　　　　　　　//多维数组做数据来源
            var db = {
                腾讯: {
                    LOL: "德玛,EZ瑞尔,剑圣",
                    BNS: "气功师,力士,刺客,气宗师",
                    DNF:"A,B,C,D"
                },
                阿里巴巴: {
                    APPLAY: "AL,EZ瑞尔,剑圣",
                    HUABEI: "AL,力士,刺客,气宗师",
                    JIEBEI: "AL,B,C,D"
                },
                百度: {
                    ggs: "BD,EZ瑞尔,剑圣",
                    BD: "BD,力士,刺客,气宗师",
                    BDBD: "BD,B,C,D",
                }
            };
　　　　　　　　//初始化select节点
            $.each(db, function (changShang) {
                $("#selF").append("<option>" + changShang + "</option>");
            })
            //一级变动
            $("#selF").change(function () {
                //清空二三级
                Init($("#selB"));
                Init($("#selC"));
                $.each(db,function (cs,pps) {
                    if ($("#selF option:selected").text() == cs) {
                        $.each(pps, function (pp, xhs) {
                            $("#selB").append("<option>" + pp + "</option>");
                        });
                        $("#selB").change(function () {
                            Init($("#selC"));
                            $.each(pps, function (pp,xhs) {
                                if ($("#selB option:selected").text()==pp) {
                                    $.each(xhs.split(','), function () {
                                        $("#selC").append("<option>" + this + "</option>");
                                    })
                                }
                            })
                        })
                    }
                })
            })

        })
    </script>

</body>
</html>